<template>
    <div class="mine">
        <v-touch @swiperight="swiperright" class="wrapper">
            <div>
                <div class="liuhai"></div>
                <div class="mine-header">
                    <div class="mine-header-top">我的</div>
                    <!--<div>
                        <div class="mine-header-body">
                            <div class="mine-header-body-left">
                                <img src="../../assets/via.jpg" alt="">
                                <div class="mine-header-body-left-text">
                                    <p>至游用户</p>
                                    <p @click="goTo('/modifieddata')">修改资料</p>
                                </div>
                            </div>
                            <div class="mine-header-body-right">
                                <p @click="goTo('/homepage')">个人主页</p>
                                <i class="mine-icon-rightArrow" @click="goTo('/homepage')">&#xe60f;</i>
                            </div>
                        </div>
                        <div class="mine-header-footer">
                            <div></div>
                            <div>
                                <div>
                                    <p @click="goTo('/Concern')">54</p>
                                    <p @click="goTo('/Concern')">关注的人</p>
                                </div>
                                <div>
                                    <p @click="goTo('/myfans')">367</p>
                                    <p @click="goTo('/myfans')">我的粉丝</p>
                                </div>
                            </div>
                            <div></div>
                        </div>
                    </div>-->
                    <div class="NotLogin" @click="goToLogin('/loginregister')">
                        <img src="../../assets/head/head4.jpg" alt="">
                        <h2 id="userNameLogin">{{ userName || '请登录' }}</h2>
                    </div>
                </div>
                <div class="mine-body">
                    <div class="mine-body-list">
                        <div @click="mineGoTo('/customization')">
                            <div>
                                <i class="mine-icon">&#xe632;</i>
                                <span>我的定制</span>
                            </div>
                            <i class="mine-icon">&#xe60f;</i>
                        </div>
                        <div @click="mineGoTo('/zycoin')">
                            <div>
                                <i class="mine-icon">&#xe62b;</i>
                                <span>至游币</span>
                            </div>
                            <i class="mine-icon">&#xe60f;</i>
                        </div>
                        <div @click="mineGoTo('/MyCollect')">
                            <div>
                                <i class="mine-icon">&#xe636;</i>
                                <span>我的收藏</span>
                            </div>
                            <i class="mine-icon">&#xe60f;</i>
                        </div>
                        <div @click="mineGoTo('/Settings')">
                            <div>
                                <i class="mine-icon">&#xe62a;</i>
                                <span>设置</span>
                            </div>
                            <i class="mine-icon">&#xe60f;</i>
                        </div>
                        <div @click="mineGoTo('/feedback')">
                            <div>
                                <i class="mine-icon">&#xe629;</i>
                                <span>帮助/反馈</span>
                            </div>
                            <i class="mine-icon">&#xe60f;</i>
                        </div>
                        <!--                    <div style="width: 100%;height: 100px;background: goldenrod" @click="goTo('/all')"></div>-->
                    </div>
                </div>
            </div>
        </v-touch>
    </div>
</template>

<script>
    import {mapState} from "vuex"

    export default {
        data() {
            return {
                userName: ''
            }
        },
        mounted() {
            this.test();
        },
        computed: {
            ...mapState(["userInfo"])
        },
        methods: {
            test() {
                this.userName = this.$cookies.get("user_name");
            },
            mineGoTo(path) {
                let userNameLogin = document.getElementById("userNameLogin").innerText;
                console.log(userNameLogin);
                if (userNameLogin === '请登录') {
                    this.alertSwal("需登陆后才能进行此操作");
                    this.$router.replace('/login');
                } else {
                    this.$router.replace(path);
                }
            },
            goToLogin(path) {
                let userNameLogin = document.getElementById("userNameLogin").innerText;
                if (userNameLogin === this.userName) {
                    console.log(userNameLogin);
                } else {
                    this.$router.replace(path);
                }
            },
            swiperright() {
                this.$router.push({'path': '/pertailor'});
            }
        }
    }
</script>

<style>
    .mine {
        background-color: white;
    }

    /********************************************字体图标********************************/
    .mine-icon {
        font-family: iconfont;
        font-size: 26px;
        font-style: normal;
    }

    .mine-body-top ul li:nth-child(1) div i {
        color: #8e65ff;
    }

    .mine-body-top ul li:nth-child(2) div i {
        color: #ff9d0a;
    }

    .mine-body-top ul li:nth-child(3) div i {
        color: #d4c7b0;
    }

    .mine-body-top ul li:nth-child(4) div i {
        color: #0fa51e;
    }

    .mine-body-top ul li:nth-child(5) div {
        background: url("../../assets/shoucang.png");
        background-size: 100% 100%;
    }

    .mine-header-top-list i {
        margin-left: 186px;
        font-size: 40px;
    }

    /*body列表内容位置调整*/
    .mint-cell-title {
        margin-left: 18px;
    }

    /*右箭头*/
    .mint-cell-wrapper i {
        font-size: 32px;
        margin-right: 24px;
    }

    /********************************************头部**********************************************/
    .mine-header {
        width: 100%;
        height: 316px;
        border-bottom: 1px #c1c1c1 solid;
        background-color: white;
    }

    /*********************************************顶部************************************************/
    /*************************************************页面标题***************************************/
    .mine-header-top {
        width: 100%;
        height: 96px;
        line-height: 96px;
        text-align: center;
        font-size: 36px;
    }

    /**********************************************头像********************************************************/
    .mine-header-body {
        width: 100%;
        height: 140px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /********************************************头像昵称*****************************************************/
    .mine-header-body-left {
        width: 268px;
        height: 140px;
        display: flex;
        flex-direction: row;
        margin-left: 16px;
    }

    .mine-header-body-left img {
        margin-top: 10px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
    }

    .mine-header-body-left-text p:nth-child(1) {
        margin-left: 20px;
        margin-top: 40px;
        font-size: 32px;
    }

    .mine-header-body-left-text p:nth-child(2) {
        margin-top: 0px;
        margin-left: 20px;
        font-size: 24px;
        color: #999999;
    }

    .mine-header-body-right {
        width: 150px;
        height: 26px;
        margin-right: 24px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .mine-header-body-right p {
        font-size: 26px;
        color: #666666;
    }

    /*.mine-icon-rightArrow {*/
    /*    font-family: iconfont;*/
    /*    margin-top: 5px;*/
    /*    font-size: 32px;*/
    /*    color: #666666;*/
    /*    font-style: normal;*/
    /*}*/
    /**********************************************关注及粉丝********************************************************/
    /*.mine-header-footer {*/
    /*    width: 100%;*/
    /*    height: 80px;*/
    /*    display: flex;*/
    /*    flex-direction: row;*/
    /*}*/
    .mine-header-footer div {
        height: 80px;
        width: 21%;
    }

    .mine-header-footer div:nth-child(2) {
        height: 80px;
        width: 58%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .mine-header-footer div:nth-child(2) div {
        width: 96px;
        height: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mine-header-footer div:nth-child(2) div p:nth-child(1) {
        font-size: 20px;
        color: #f77754;
    }

    .mine-header-footer div:nth-child(2) div p:nth-child(2) {
        font-size: 24px;
        color: #666666;
    }

    /**********************************************主体********************************************************/
    .mine-body {
        width: 100%;
    }

    /***********************************************主体顶部导航栏*******************************************************/
    /**********************************************主体列表********************************************************/
    .mine-body-top ul {
        width: 100%;
        height: 188px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        font-size: 22px;
        color: #666666;
    }

    .mine-body-top ul li {
        display: flex;
        height: 188px;
        width: 20%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .mine-body-top ul li div {
        width: 112px;
        height: 112px;
        margin-bottom: 10px;
        border-radius: 50%;
    }

    .mine-body-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mine-body-list > div {
        width: 688px;
        height: 96px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .mine-body-list > div > div:nth-child(1) > span {
        width: 112px;
        height: 28px;
        font-size: 28px;
        line-height: 28px;
        margin-left: 18px;
        color: #333333;
    }

    .mine-body-list > div > div:nth-child(1) > i {
        font-size: 28px;
    }

    .mine-body-list > div:nth-child(1) > div:nth-child(1) > i {
        color: #8e65ff;
    }

    .mine-body-list > div:nth-child(2) > div:nth-child(1) > i {
        color: #f7931e;
    }

    .mine-body-list > div:nth-child(3) > div:nth-child(1) > i {
        color: #fe2121;
    }

    .mine-body-list > div:nth-child(4) > div:nth-child(1) > i {
        color: #666666;
    }

    .mine-body-list > div:nth-child(5) > div:nth-child(1) > i {
        color: #809af2;
    }

    .mine-body-list > div > i {
        font-size: 28px;
        color: #999999;
    }

    .mint-cell {
        border: 0;
    }

    .mint-cell-wrapper {
        height: 88px;
    }

    .mint-cell-text {
        font-size: 28px;
        color: #333333 !important;
    }

    .mintui-more::before {
        content: "";
        /*background: url("../../assets/via.jpg");*/
        background-size: 100% 100%;
        font-size: 28px;
    }

    .mintui-more {
        font-size: 40px;
    }

    .mint-cell-wrapper {
        background-image: none !important;
    }

    .NotLogin {
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    .NotLogin > img {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        margin-right: 10px;
    }
</style>
